<template>
	<div id="container">
		<div class="titleBox">
			<statistics>
				<template #img><img src="../../assets/images/分类.png" alt="" /></template>
				<template #header>分公司业务统计</template>
				<template #subhead>All categories</template>
			</statistics>
		</div>
		<div class="chart-container">
			<div ref="chart" class="chart" />
		</div>
	</div>
</template>
<script>
	import * as echarts from 'echarts';
	import statistics from '@/components/statistics.vue';
	import { fontSize } from '@/common/fontSize';
	export default {
		props: {
			chartData: {
				default: () => {
					return {};
				},
			},
		},
		components: {
			statistics,
		},
		data() {
			return {
				statusChart: null,
			};
		},
		computed: {},
		mounted() {
			this.initChart();
			window.addEventListener('resize', () => {
				// 判断是否存在，直接调用resize方法
				if (this.statusChart) this.statusChart.resize();
			});
		},
		methods: {
			initChart() {
				this.statusChart = echarts.init(this.$refs.chart);
				let option = {
					legend: {
						top: 0,
						bottom: 0,
						textStyle: {
							color: '#fff',
							fontSize: fontSize(0.12),
						},
						itemWidth: fontSize(0.25),
						itemHeight: fontSize(0.14),
						itemGap: fontSize(0.15),
						padding: fontSize(0.05),
					},
					tooltip: {},
					dataset: {
						dimensions: ['product', '2015', '2016', '2017'],
						source: [
							{ product: 'Latte', 2015: 159, 2016: 85.8, 2017: 93.7 },
							{ product: 'Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
							{ product: 'Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
							{ product: 'Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 },
						],
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							fontSize: fontSize(0.12),
						},
						axisTick: {
							length: fontSize(0.05),
							lineStyle: {
								width: fontSize(0.01),
							},
						},
						axisLabel: {
							margin: fontSize(0.08),
							fontSize: fontSize(0.12),
						},
					},
					yAxis: {
						axisLabel: {
							fontSize: fontSize(0.12),
						},
						splitLine: {
							lineStyle: {
								width: fontSize(0.01),
							},
						},
					},
					grid: {
						top: fontSize(0.3),
						bottom: fontSize(0.1),
						left: '10%',
						containLabel: true,
					},
					// Declare several bar series, each will be mapped
					// to a column of dataset.source by default.
					series: [
						{
							type: 'bar',
							barCategoryGap: '40%',
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#2F4052' },
								{ offset: 0.5, color: '#4CA1AF9A' },
								{ offset: 1, color: '#B2B9BE' },
							]),
						},
						{
							type: 'bar',
							barCategoryGap: '40%',
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#FFFFFF9f' },
								{ offset: 0.5, color: '#028EA19F' },
								{ offset: 1, color: '#AEBDE3' },
							]),
						},
						{
							type: 'bar',
							barCategoryGap: '40%',
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#B9D0F09F' },
								{ offset: 0.5, color: '#18545A9F' },
								{ offset: 1, color: '#000000' },
							]),
						},
					],
				};
				this.statusChart.setOption(option);
			},
		},
		beforeDestroy() {},
	};
</script>
<style scoped>
	#container {
		height: 100%;
		display: flex;
		flex-direction: column;

		.chart-container {
			flex: 1;
			width: 90%;
			margin: 0 auto;
			height: 70%;
			display: flex;
			align-items: center;
			.chart {
				width: 100%;
				height: 90%;
				margin: 0 auto;
			}
		}
	}
</style>
